<template>
  <div>
    <view v-if="isLogin" class="page">
      <div class="grid" @click="toDetail(item)" v-for="item in dataList" :key="item.id">
        <div class="grid_head">
          <span>设备名称：</span>
          <span>{{ item.device_no }}</span>
        </div>
        <div class="grid_box flex_" >
          <u-icon name="photo" size="80"></u-icon>
        </div>
      </div>

      <u-empty v-if="dataList.length===0" style="width: 100%" text="暂无数据"></u-empty>

    </view>
    <view v-else class="page">
      <u-empty style="width: 100%" text="查看设备信息，需要登录。">
        <span slot="bottom" class="btn"><u-button type="primary"  shape="circle" @click="toLogin">登录</u-button></span>
      </u-empty>
    </view>

  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      agree: false,
      mobile:'',
      dataList:[]
    }
  },
  onShow() {
    let isLogin = uni.getStorageSync('isLogin')
    this.isLogin = isLogin
    let avatarUrl =  uni.getStorageSync('avatarUrl')
    this.mobile =  uni.getStorageSync('mobile')
    if (!avatarUrl){
      this.agree = false
    }else {
      this.agree = true
    }
    this.getDevice()
  },
  methods: {
    getDevice(){
      let form = {mobile:this.mobile}
      this.$http.post('/device/list', {...form}).then(data=>{
        console.log(data)
        if (data.code==200){
          this.dataList = data.data
        }else {
          this.$toast.error(res.msg)
        }
      })

    },
    toDetail(item){
      console.log(item.device_no)
      uni.navigateTo({
        url: '/pages/device_detail/index'+'?id='+item.id+'&no='+item.device_no,
      })
    },
    toLogin(){
      if (!this.agree){
        let self = this
        uni.getUserProfile({
          desc: '获取你的昵称、头像、地区及性别',
          success: res => {
            self.avatarUrl = res.userInfo.avatarUrl
            self.nickName = res.userInfo.nickName
            uni.setStorageSync('avatarUrl',res.userInfo.avatarUrl);
            uni.setStorageSync('nickName', res.userInfo.nickName);
            self.agree = true
            uni.navigateTo({
              url: '/pages/login/index'
            })
          },
          fail: err => {
            //拒绝授权
            uni.showToast({
              title: '您拒绝了请求',
              icon: 'error',
              duration: 2000
            })

          }
        });
      }else {
        uni.navigateTo({
          url: '/pages/login/index'
        })
      }
    }
  }
}
</script>

<style  scoped lang="scss">
.page{
  width: 100%;
  min-height: 100vh;
  padding: 5px;
  background-color: rgb(249, 249, 252);
  display: flex;
  box-sizing: content-box;
  flex-wrap: wrap;
}
.grid{
  width: 45%;
  height: 200px;
  margin: 5px 2%;
  border-radius: 5px;
  box-shadow: 0 4px 12px 0 #6465661E;
  box-sizing: content-box;
  overflow: hidden;
}
.grid_head{
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #7990a2;
  background-color: #fff;
}
.grid_box{
  height: 140px;
}
.btn{
  width: 200px;
  margin-top: 20px;
}

</style>